<template>
    <div class="recommendedReading_main_home">
        <div class="r_title">
            <span class="txt1">推荐</span>
            <span class="txt2">问答</span>
        </div>
        <div class="list">
            <nuxt-link v-for="(item, index) in readingList" :key="index" class="item" target="_blank"
                :to="getRouterLink(item)">
                <div class="item_title">
                    <img src="~/assets/images/csjh/index/wen.png" alt="" />
                    <div class="title">{{ item[titleKey] }}</div>
                </div>
                <div class="item_text">
                    <img src="~/assets/images/csjh/index/da.png" alt="" />
                    <div class="txt">{{ showMessage(item[textKey]) }}</div>
                </div>
            </nuxt-link>
        </div>
    </div>
</template>
<script>
export default {
    name: "recommendedReading",
    props: {
        readingList: {
            type: Array,
            default: () => {
                return [];
            },
        },
        titleKey: {
            type: String,
            default: "title",
        },
        textKey: {
            type: String,
            default: "introduce",
        },
    },
    data() {
        return {
            showMessage: function (first_answer) {
                if (first_answer && first_answer.length > 0) {
                    let messages = "";
                    for (let item of first_answer) {
                        let msg = JSON.parse(item.message);

                        if (msg.extendedData.type == 111)
                            messages = messages + "[表情]，";
                        else if (msg.extendedData.type == 11)
                            messages = messages + "[图片]，";
                        else
                            messages =
                                messages +
                                JSON.parse(item.message).message +
                                "，";
                    }
                    return messages;
                } else {
                    return "";
                }
            },
            getRouterLink: function (item) {
                return `/cswd/${item.id}.html`
            },
        };
    },
    methods: {},
    created() { },
    mounted() { },
    watch: {},
};
</script>
<style lang="scss">
.recommendedReading_main_home {
    width: 100%;
    background: #fff;
    padding: 30px 35px;

    .r_title {
        font-size: 18px;
        font-weight: 700;
        color: #333333;
        line-height: 12px;

        .txt1 {
            color: #fa5151;
        }
    }

    .list {
        margin-top: 27px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #f3f3f3;

        .item {
            max-width: 50%;
            box-sizing: border-box;
            display: block;
            flex-basis: 50%;
            padding: 27px 0;
            border-right: 1px solid #f3f3f3;
            border-bottom: 1px solid #f3f3f3;
            padding-left: 50px;

            &:hover .item_title {
                color: #1c87f3;
            }

            .item_title {
                display: flex;
                align-items: flex-start;
                margin-bottom: 12px;
                font-size: 16px;
                font-weight: 600;
                color: #333333;
                line-height: 22px;

                .title {
                    //多行文本溢出显示省略号
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    /*设置对齐模式*/
                    -webkit-line-clamp: 1;
                    /*设置多行的行数，示例为1行*/

                }

                &::v-deep img {
                    width: 24px;
                    height: 24px;
                    margin-right: 12px;
                }
            }

            .item_text {
                display: flex;
                align-items: flex-start;
                min-width: 296px;
                font-size: 14px;
                font-weight: 400;
                color: #666666;
                line-height: 24px;

                .txt {
                    //多行文本溢出显示省略号
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    /*设置对齐模式*/
                    -webkit-line-clamp: 2;
                    /*设置多行的行数，示例为2行*/

                }

                &::v-deep img {
                    width: 24px;
                    height: 24px;
                    margin-right: 12px;
                }

                &::v-deep p {
                    line-height: 20px !important;
                }

                &::v-deep span {
                    line-height: 20px !important;
                }

                &::v-deep a {
                    line-height: 20px !important;
                }
            }

            &:nth-child(odd) {
                padding-left: 0;
                padding-right: 50px;
                box-sizing: border-box;
            }

            &:nth-child(2n) {
                border-right: none;
            }

            &:nth-last-child(-n + 2) {
                border-bottom: none;
            }
        }
    }
}
</style>